<template>
    <div class="news-warp">
        <div class="hd-title">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-a-zu17"></use>
                </svg>
                <img src="../../assets/img/14.png" style="height: 31px;" />
            </div>
            <router-link :to="{ name: 'news' }" style="text-decoration: none;color:#2E3033">
                查看更多<i class="el-icon-arrow-right"></i>
            </router-link>
        </div>
        <div>
            <el-button size="small" v-for="item in category" :key="item.id" :type="item.id === activeId ? 'danger' : ''"
                @click="changeCategory(item.id)">{{ item.name }}</el-button>
        </div>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="searchKey">
                <el-input placeholder="搜索更多资讯" v-model="ruleForm.title" class="searchNews"></el-input>
                <el-button type="danger" :disabled="ruleForm.title === ''"
                    @click="submitSearchForm('ruleForm')">搜索</el-button>
            </el-form-item>
        </el-form>
        <template v-if="activeId === 1">
            <div class="news-list">
                <div class="news-item" v-for="item in hyNewsList" :key="item.id"
                    @click="$router.push({ name: 'newsDetails', params: { id: item.id } })">
                    <img
                        :src="item.istop ? require('../../assets/img/topup.png') : require('../../assets/img/18.png')" />
                    <div class="title text-hide">{{ item.title }}</div>
                    <time>{{ item.createTime }}</time>
                </div>
            </div>
        </template>
        <template v-if="activeId === 2">
            <div class="news-list">
                <div class="news-item" v-for="item in gsNewsList" :key="item.id"
                    @click="$router.push({ name: 'newsDetails', params: { id: item.id } })">
                    <img
                        :src="item.istop ? require('../../assets/img/topup.png') : require('../../assets/img/18.png')" />
                    <div class="title text-hide">{{ item.title }}</div>
                    <time>{{ item.createTime }}</time>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import { getNewsList } from '@/api/apis'
export default {
    name: 'indexNews',
    data () {
        return {
            ruleForm: {
                title: ''
            },
            rules: {
                title: [
                    { required: true, message: '请输入搜索内容', trigger: 'blur' }
                ]
            },
            activeId: 1,
            category: [
                {
                    id: 1,
                    name: '行业资讯'
                },
                {
                    id: 2,
                    name: '公司动态'
                }
            ],
            hyNewsList: [],
            gsNewsList: [],
        }
    },
    mounted () {
        this.getHyNewsList();
        this.getGsNewsList();
    },
    methods: {
        changeCategory (id) {
            this.activeId = id
        },
        submitSearchForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.activeId === 1){
                        this.getHyNewsList()
                    }else {
                        this.getGsNewsList()
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // 获取行业资讯数据
        getHyNewsList() {
            let that = this
            getNewsList({ type: 1, title: that.ruleForm.title }).then(res => {
                if (res.code === 1) {
                    that.hyNewsList = res.data.data
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // 获取公司动态数据
        getGsNewsList() {
            let that = this
            getNewsList({ type: 2, title: that.ruleForm.title }).then(res => {
                if (res.code === 1) {
                    that.gsNewsList = res.data.data
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
    },
}
</script>

<style scoped lang="less">
.hd-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    .icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }
}

.news-warp {
    padding: 15px;
    border-radius: 10px;
    background: #FFFFFF;

    .searchNews {
        margin-top: 15px;
        margin-bottom: 15px;

        /deep/.el-input__suffix {
            right: 0;
        }
    }
    .el-form-item__content{
        .el-button {
            position: absolute;
            top: 15px;
            right: 0;
        }
    }

    /deep/.el-form {
        .el-form-item__error {
            top: 84%;
        }

        .el-form-item {
            margin-bottom: 0;
        }
    }

    .news-list {
        .news-item {
            display: grid;
            grid-template-columns: 14px 1fr 100px;
            align-items: center;
            padding: 6px 0;
            cursor: pointer;

            &:hover {
                .title {
                    color: #ef312a
                }
            }

            img {
                width: 14px;
                height: 14px;
            }

            .title {
                font-size: 14px;
                color: #2E3033;
                margin-left: 10px;
            }

            time {
                display: block;
                font-size: 14px;
                color: rgba(46, 48, 51, .6);
                text-align: right;
            }
        }
    }
}
</style>